<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>企业管理</title>
    <!-- 引入 css 样式 -->
    <link rel="stylesheet" href="../css/8-qygl.css">
    <!-- 引入 css 的CDN -->
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.1/css/bootstrap.min.css" rel="stylesheet">
    <!-- 引入 js 的CDN -->
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.1/js/bootstrap.min.js"></script>
    <!-- 引入 js 封装 -->
    <script src="../js/ajax-request.js"></script>
    <!-- 引入 css代码 搜索图表 -->
    <link rel="stylesheet" href="../font/iconfont.css">
    <!-- 使用百度地图api -->
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=y2G9G88wEWxiqHPCUiQpB6hDL7tgj8eF"></script>

</head>

<body>
    <!-- 百度地图背景 -->
    <div class="map">
        <!-- 地图容器 -->
        <div id="container"></div>

        <script>
            var map = new BMapGL.Map("container"); // 创建地图实例 
            var point = new BMapGL.Point(113.823024, 34.79473); // 创建点坐标 
            map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别
            map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
            map.setHeading(64.5); //设置地图旋转角度
            map.setTilt(73); //设置地图的倾斜角度

            var scaleCtrl = new BMapGL.ScaleControl(); // 添加比例尺控件
            map.addControl(scaleCtrl);
            var zoomCtrl = new BMapGL.ZoomControl(); // 添加缩放控件
            map.addControl(zoomCtrl);

            var marker = new BMapGL.Marker(point); // 创建标注   
            map.addOverlay(marker); // 将标注添加到地图中
            map.setMapStyleV2({
                styleId: '1d9505d1c91d280a9435bb4a93106f7d'
            });
        </script>
    </div>

    <!-- 顶部导航栏 -->
    <div class="nav1">
        <div class="nav2"><i>排水管网GIS综合应用系统</i></div>
    </div>
    <div class="nav">
        <div class="navbar2"><a href="0.html">首页</a>
            <div class="tri"></div>
        </div>
        <!-- 第一个 -->
        <div class="navbar2"><a href="2.html">地图操作</a>
            <div class="tri"></div>
        </div>
        <!-- 第二个 -->
        <div class="navbar2"><a href="3.html">管网查询</a>
            <div class="tri"></div>
        </div>
        <!-- 第三个 -->
        <div class="navbar2"><a href="4.html">管网统计</a>
            <div class="tri"></div>
        </div>
        <!-- 第四个 -->
        <div class="navbar2"><a href="5.html">巡检查询</a>
            <div class="tri"></div>
        </div>
        <!-- 第五个 -->
        <div class="navbar2 navbar1"><a href="6.html">抢修养护</a>
            <div class="tri"></div>
        </div>
        <!-- 第六个 -->
        <div class="navbar2"><a href="7.html">图档管理</a>
            <div class="tri"></div>
        </div>
        <!-- 第七个 -->
        <div class="navbar2" id="navbar3"><a href="8.html">企业管理</a>
            <div class="tri active"></div>
        </div>
        <!-- 第八个 -->
        <div class="navbar2"><a href="9.html">窨井管理</a>
            <div class="tri"></div>
        </div>
        <!-- 第九个 -->
        <div class="navbar2"><a href="10.html">泵站管理</a>
            <div class="tri"></div>
        </div>

        <div class="tubiao">
            <span class="iconfont icon-shezhixitongshezhigongnengshezhishuxing" id="shezhi"></span>
            <span class="iconfont icon-yonghu" id="yonghu">&nbsp;admin</span>
            <span class="iconfont icon-exit-full" id="exit"></span>
        </div>
        <!-- 第十个 -->
    </div>
    <!-- 指南针 -->
    <div class="compass"></div>
    <div class="compass1"></div>
    <div class="tubiaobottom">
        <span class="iconfont icon-sousuo" id="sousuo"></span>
        <span class="iconfont icon-jia" id="jia"></span>
        <span class="iconfont icon-jianhao" id="jiahao"></span>
        <span><img src="../img/images/10010.png" alt=""></span>
        <span class="iconfont icon-fangzi1" id="fangzi"></span>
        <span class="iconfont icon-full-screen" id="jiantou"></span>
    </div>


    <!-- 图层选择部分 -->
    <div class="big">
        <div>
            <h4 class="top"><img src="../img/images/图标.png" width="28" class="h4">&nbsp;图层选择</h4>
        </div>
        <div class="bop">
            <div class="one"><input type="checkbox" name="select">
                <div class="diyi1"></div>
                雨污合流管道
            </div>
            <div class="two"><input type="checkbox" name="select" checked>
                <div class="diyi2"></div>
                污水管道
            </div>
            <div class="three"><input type="checkbox" name="select" checked>
                <div class="diyi3"></div>
                雨水管道
            </div>
            <div class="two"><input type="checkbox" name="select" checked><img src="../img/images/10016.png" width="25">&nbsp;排污检修井
            </div>
            <div class="two"><input type="checkbox" name="select" checked><img src="../img/images/10017.png" width="25">&nbsp;排洪检修井
            </div>
            <div class="two"><input type="checkbox" name="select"><img src="../img/images/10018.png" width="25">&nbsp;检修井
            </div>
            <div class="four"><input type="checkbox" name="select"><img src="../img/images/10019.png" width="25">&nbsp;雨篦
            </div>
            <div class="one"><input type="checkbox" name="select" checked>
                <div class="circle1"></div>&nbsp;污水泵站
            </div>
            <div class="five"><input type="checkbox" name="select" checked>
                <div class="circle2"></div>&nbsp;污水处理厂
            </div>
            <div class="six"><input type="checkbox" name="select" checked><img src="../img/images/10020.png" width="25">&nbsp;企业
            </div>
        </div>

    </div>

    <!-- 底部查看框 -->
    <div class="enterprise">
        <div class="information">
            <div class="handle">
                <div class="type">类型</div>
                <div class="select">
                    <span class="iconfont icon-sousuo"></span>
                    <input type="text" class="sousuo" placeholder="名称/地址/联系人">
                    <input type="button" class="chaxun" value="查询">
                </div>
            </div>
            <div class="title">
                <table>
                    <tr>
                        <td class="first">序号</td>
                        <td class="second">名称</td>
                        <td class="third">地址</td>
                        <td class="fourth">联系人</td>
                        <td class="fifth">类型</td>
                        <td class="sixth">操作</td>
                    </tr>
                </table>
            </div>
            <div class="fanye">
                <nav aria-label="Page navigation example">
                    <ul class="pagination">
                        <li class="page-item">
                            <a class="page-link" href="#" aria-label="Previous">
                                <span aria-hidden="true">&laquo;</span>
                            </a>
                        </li>
                    </ul>
                </nav>
                <div>
                    <input type="button" class="export" value="导出">
                </div>
            </div>

        </div>
    </div>

    <script>
        // 封装渲染的表格
        function tabFun(page, qyglData) {
            // 获取列表
            var table = document.getElementsByTagName("table")[0];
            // 渲染表格初始化，只剩下表头
            table.innerHTML = `<table>
                                    <tr>
                                        <td class="first">序号</td>
                                        <td class="second">名称</td>
                                        <td class="third">地址</td>
                                        <td class="fourth">联系人</td>
                                        <td class="fifth">类型</td>
                                        <td class="sixth">操作</td>
                                    </tr>
                                </table>`;
            // 三目判断，判断当前页是否够数据的渲染
            for (var i = 10 * (page - 1); i < (10 * page <= qyglData.qygl.length ? 10 * page : qyglData.qygl.length); i++) {
                table.innerHTML += `<tr>
                                        <td>${qyglData.qygl[i].id}</td>
                                        <td>${qyglData.qygl[i].name}</td>
                                        <td>${qyglData.qygl[i].address}</td>
                                        <td>${qyglData.qygl[i].contact}</td>
                                        <td>${qyglData.qygl[i].type}</td>
                                        <td><a href="">查看定位</a></td>
                                    </tr>`;
            }

        }
        // ajax请求函数
        ajaxFun("../json/qyglData.json", function(qyglData) {
            console.log(qyglData);
            // 转换为对象形式
            qyglData = JSON.parse(qyglData);
            console.log(qyglData);
            // 一页展示10条数据
            // 获取总数据数
            var num = qyglData.qygl.length;
            console.log(num);
            // 向上取整
            var pageNum = Math.ceil(num / 10);
            console.log(pageNum);
            // 获取分页元素
            var pagination = document.getElementsByClassName("pagination")[0];
            // 循环渲染
            for (var i = 1; i <= pageNum; i++) {
                pagination.innerHTML += `<li class="page-item"><a class="page-link" href="#">${i}</a></li>`
            }
            pagination.innerHTML += `<li class="page-item">
                                        <a class="page-link" href="#" aria-label="Next">
                                        <span aria-hidden="true">&raquo;</span>
                                        </a>
                                    </li>`;

            // 搜索部分
            // 获取搜索框，和搜索按钮
            var inp = document.getElementsByClassName("sousuo")[0];
            var btn = document.getElementsByClassName("chaxun")[0];

            // 准备一个空数组，用来保存符合搜索条件的数据
            var newData = [];

            btn.onclick = function() {
                // 拿到输入框里的内容
                console.log(qyglData.qygl);

                // 遍历对应的数据
                for (var i = 0; i < qyglData.qygl.length; i++) {
                    // 对象的遍历
                    for (var key in qyglData.qygl[i]) {
                        // 拿到对应的key值
                        // 通过[]访问值
                        console.log(qyglData.qygl[i][key]);

                        // 将值和搜索框的内容进行对比
                        // toString()都转换为字符串形式
                        if (qyglData.qygl[i][key].toString().includes(inp.vlaue)) {
                            newData.push(qyglData.qygl[i]);
                            // 只要发现符合搜索条件的数据内容，就直接终止遍历，进行下一条数据的遍历
                            break;
                        }
                    }
                }
                console.log(newData);
                // 渲染搜索后的数据
                for (var k = 5 * (page - 1); k < (5 * page <= newData.length ? 5 * page : newData.length); k++) {
                    table.innerHTML += `<tr>
                                            <td>${newData[i].id}</td>
                                            <td>${newData[i].name}</td>
                                            <td>${newData[i].address}</td>
                                            <td>${newData[i].contact}</td>
                                            <td>${newData[i].type}</td>
                                            <td><a href="">查看定位</a></td>
                                        </tr>`;
                }
            }

            // 使打开页面时，表格就有数据显现
            tabFun(1, qyglData);
            // 获取所有的分页元素
            var pageItem = document.getElementsByClassName("page-link");
            // 循环事件绑定，避开了上一页和下一页
            for (var j = 1; j < pageItem.length - 1; j++) {
                pageItem[j].onclick = function() {
                    console.log(this.innerHTML);

                    // 调用渲染的函数进行数据的渲染
                    tabFun(this.innerHTML, qyglData);
                }
            }

            // 搜索部分
            // 获取搜索框和搜索按钮
            var inp = document.getElementsByClassName("sousuo")[0];
            var btn = document.getElementsByClassName("chaxun")[0];

            // 准备一个空数组，用来保存符合搜索条件的数据
            var newData = [];

            btn.onclick = function() {
                var table = document.getElementsByTagName("table")[0];
                console.log(table);
                table.innerHTML = `<table>
                                    <tr>
                                        <td class="first">序号</td>
                                        <td class="second">名称</td>
                                        <td class="third">地址</td>
                                        <td class="fourth">联系人</td>
                                        <td class="fifth">类型</td>
                                        <td class="sixth">操作</td>
                                    </tr>
                                </table>`;

                // 拿到输入框的内容
                console.log(qyglData.qygl);

                // 遍历对应的数据
                for (var i = 0; i < qyglData.qygl.length; i++) {
                    // 对象的遍历
                    for (var key in qyglData.qygl[i]) {
                        // console.log(key);
                        // 可以拿到对应的值
                        console.log(qyglData.qygl[i][key]);

                        // 将值和搜索框的内容进行比对
                        if (qyglData.qygl[i][key].toString().includes(inp.value)) {
                            newData.push(qyglData.qygl[i]);
                            // 只要发现有符合所搜条件的内容，就直接终止遍历
                            break;
                        }
                    }
                }

                console.log(newData);
                // tabFun(page, newData);

                // 拿着符合条件的数据进行页面渲染
                for (var i = 0; i < newData.length; i++) {

                    table.innerHTML += `<tr>
                                            <td>${newData[i].id}</td>
                                            <td>${newData[i].name}</td>
                                            <td>${newData[i].address}</td>
                                            <td>${newData[i].contact}</td>
                                            <td>${newData[i].type}</td>
                                            <td><a href="">查看定位</a></td>
                                        </tr>`;
                }

            }
        })
    </script>
</body>

</html>